<template>
  <cascader
    class="address-cascader"
    ref="cascader"
    v-bind="$props"
    :options="optionsTree"
    @change="handleChange" />
</template>

<script>
  import Cascader from 'element-ui/lib/cascader'
  export default {
    componentName: 'EAddressCascader',
    components: {
      Cascader
    },
    props: {
      ...Cascader.props,
      grade: { // 定位到哪个层级
        type: Number,
        default: 3
      },
      options: {
        type: Array,
        required: false
      },
      addressTree: {
        type: Array,
        default () {
          return []
        }
      }
    },
    data () {
      return {
        optionsTree: []
      }
    },
    mounted () {
      /**
      * 修改记录 By 何仕敬
      * 添加对发布服务-培训-地址区多选中的港澳特殊处理
      * 不影响组件原有使用
      */
      this._getAreaJSON().then(areaJSON => {
        this.$$areaJSON = areaJSON
        if (this.addressTree.length) {
          this.optionsTree = this.addressTree // 使用传递渲染好的地址数据
        } else {
          this._initAddressData(areaJSON) // 使用默认初始化地址数据
        }
      })
    },
    methods: {
      _getAreaJSON () {
        return new Promise((resolve) => {
          require.ensure([], (r) => {
            let areaJSON = require('areaJSON')
            resolve(areaJSON)
          })
        })
      },
      _initAddressData (areaJSON) {
        // 初始化地址数据
        let result = []
        areaJSON.province.forEach(p => {
          let city = []
          if (areaJSON.city[p.areaId] && this.grade > 1) {
            areaJSON.city[p.areaId].forEach(c => {
              let area = []
              if (areaJSON.area[c.areaId] && this.grade > 2) {
                areaJSON.area[c.areaId].forEach(a => {
                  a.parentId === c.areaId && area.push({
                    value: a.areaId,
                    label: a.title
                  })
                })
              }
              let cityObject = {
                value: c.areaId,
                label: c.title
              }
              if (this.grade > 2 && area.length) {
                cityObject.children = area
              }
              city.push(cityObject)
            })
          }
          result.push({
            value: p.areaId,
            label: p.title,
            children: this.grade > 1 ? city : null
          })
        })
        this.optionsTree = result
      },
      handleChange (value) {
        this.$emit('update:label', this._getLabel(value))
          .$emit('input', value)
          .$emit('change', value)
      },
      _getLabel (value, areaJSON) {
        // 整合 内部使用 和 外部使用
        let result = []
        let $areaJSON = areaJSON || this.$$areaJSON
        value.forEach((item, index) => {
          if (index === 0) {
            $areaJSON.province.forEach(p => {
              p.areaId === item && result.push(p.title)
            })
          }
          if (index === 1 && $areaJSON.city[value[0]]) {
            $areaJSON.city[value[0]].forEach(c => {
              c.areaId === item && result.push(c.title)
            })
          }
          if (index === 2 && $areaJSON.area[value[1]]) {
            $areaJSON.area[value[1]].forEach(a => {
              a.areaId === item && result.push(a.title)
            })
          }
        })
        return result
      },
      getLabel (value) {
        // 外部组件单独调用获取地址数据方法
        return new Promise(resolve => {
          this._getAreaJSON().then(areaJSON => {
            resolve(this._getLabel(value, areaJSON))
          })
        })
      }
    },
    destroyed () {
      this.$$areaJSON = null
    }
  }
</script>
